<template>
	<view>
		<view style="margin-top: 10rpx;">
			<u-select v-model="show" mode="single-column" :list="publicNumList" @confirm="publicNumConfirm"></u-select>
			<u-button @click="show = true">请选择期号</u-button>
		</view>
		<u-card title="本期预测可能出现的红球号码">
			<view class="" slot="body">
				<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
					<view class="u-body-item u-line-3">
						<text v-for="(v1,k1) in getBall(ball.next.red)" class="red-ball">{{v1}}</text>
					</view>
				</view>
			</view>
		</u-card>
		<u-card title="本期实际中奖的红球号码">
			<view class="" slot="body">
				<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
					<view class="u-body-item-title u-line-2">
						<text v-for="(v1,k1) in getBall(ball.curr.red)" class="red-ball">{{v1}}</text>
					</view>
				</view>
			</view>
		</u-card>

		<u-card title="本期预测可能出现的蓝球号码">
			<view class="" slot="body">
				<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
					<view class="u-body-item-title u-line-2">
						<text v-for="(v1,k1) in getBall(ball.next.blue)" class="blue-ball">{{v1}}</text>
					</view>
				</view>
			</view>
		</u-card>
		<u-card title="本期实际中奖的蓝球号码">
			<view class="" slot="body">
				<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
					<view class="u-body-item-title u-line-2">
						<text class="blue-ball">{{ball.curr.blue>9?ball.curr.blue:'0'+ball.curr.blue}}</text>
					</view>
				</view>
			</view>
		</u-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ball: {
					curr: {
						red: [11, 2, 33, 24, 31],
						blue: 16
					},
					next: {
						red: [11, 2, 33, 24, 31],
						blue: [16, 1, 3, 8]
					}
				},
				show: false,
				publicNumList: [],
			};
		},
		onLoad() {
			uni.request({
				url: 'http://127.0.0.1:8000/ssq/api/v1/public/num/all', //仅为示例，并非真实接口地址。
				data: {},
				header: {},
				success: (res) => {
					this.publicNumList = res.data
				}
			});
		},
		methods: {
			publicNumConfirm(e) {
				uni.request({
					url: 'http://127.0.0.1:8000/ssq/api/v1/ball', //仅为示例，并非真实接口地址。
					data: {
						id: e[0].value
					},
					header: {},
					success: (res) => {
						this.ball = res.data
					}
				});
			},
			//处理红球
			getBall(ball) {
				let result = []
				for (var i = 0; i < ball.length; i++) {
					let temp = ball[i]
					if (temp > 9) {
						result.push('' + temp)
					} else {
						result.push('0' + temp)
					}
				}
				return result
			}
		}
	};
</script>

<style scoped lang="scss">
	.blue-ball,
	.red-ball {
		display: inline-block;
		margin: 5rpx;
		padding: 6rpx;
		font-size: 36rpx;
		border-radius: 50%;
		color: white;
	}

	.blue-ball {
		background-color: blue;
	}

	.red-ball {
		background-color: red;
	}
</style>
